<template>
  <view class="container" @tap="handlePageClick">
    <view class="t-0 fixed z-2 w-full">
      <S1Header :title="pageConfig.title" :on-back="onBack">
        <template #right>
          <view class="flex items-center" @click="onCollectionDoc">
            <image src="https://ceshiweb.picaime.com/static/images/share.png" class="mr-4rpx h-32rpx w-32rpx" />
            <text class="text-30rpx">
              分享
            </text>
          </view>
        </template>
      </S1Header>
    </view>

    <!-- 下面的信息 -->
    <view class="pb-200rpx pt-140rpx" style="padding-bottom: 200rpx;">
      <view class="goods_box">
        <view class="thegoodsname">
          <view class="font-title">
            {{ displayInfo.name }}
          </view>
          <view class="font-number">
            {{ displayInfo.id }}
          </view>
        </view>
        <!-- 下面的时间 -->
        <view class="goods_time">
          {{ displayInfo.time }}&nbsp;&nbsp;系统
        </view>
        <!-- 右侧状态和箭头 -->
        <view
          class="right_box" :style="!pageConfig.isFromPici
            ? { backgroundColor: 'rgba(209, 255, 227, 1)', color: '#43cf7c' }
            : getStatusStyle(displayInfo.status)
          "
        >
          {{ !pageConfig.isFromPici ? "分类" : displayInfo.status }}
        </view>
        <!-- 右边下面 -->
        <view class="right_box_bottom" @click="handleAddGoods">
          <img
            style="
              width: 30rpx;
              height: 30rpx;
              margin-top: 16rpx;
              color: rgb(154 156 161 / 100%);
            " src="https://ceshiweb.picaime.com/static/images/order/add.png" alt=""
          >
          <view
            class="right_zi" style="
              margin-left: 6rpx;
              font-size: 30rpx;
              font-weight: 500;
              color: rgb(67 207 124 / 100%);
            "
          >
            添加货品
          </view>
        </view>
      </view>
      <!-- 库存信息标题 -->
      <view class="info_goods">
        <div class="info_left">
          库存信息
        </div>
        <img
          src="https://ceshiweb.picaime.com/static/images/filter.png" style="
            width: 28rpx;
            height: 28rpx;
            margin-top: 28rpx;
            margin-right: 30rpx;
            line-height: 28rpx;
          " alt=""
        >
      </view>
      <!-- 下面的表格 -->
      <view class="titleofname">
        <view class="table-header">
          <view class="goods-column table-cell">
            货品
          </view>
          <view class="data-column table-cell" style="justify-content: flex-end;">
            入库量
          </view>
          <view class="data-column table-cell" style="justify-content: flex-end;">
            销量
          </view>
          <view class="data-column table-cell" style="justify-content: flex-end;">
            库存
          </view>
          <view class="action-column table-cell" style="justify-content: flex-end;">
            操作
          </view>
        </view>
        <view v-for="(item, index) in tableData" :key="item.goods_id" class="table-row">
          <view class="goods-column table-cell">
            <view class="goods-item-container">
              <view class="goods-index-number">
                {{ index + 1 }}.
              </view>
              <view class="goods-content-wrapper">
                <view class="goods-name-text">
                  {{ item.goods_name }}
                </view>
                <view class="goods-spec-container">
                  <view v-for="(guige, idx) in item.goods_guige" :key="idx" class="spec-tag-fixed">
                    1{{ guige.relation }}={{ guige.num }}{{ guige.unit }}
                  </view>
                  <view v-if="item.goods_guige.length === 0" class="spec-tag-flexible">
                    无定装按{{ item.unit }}卖
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="data-column data-value table-cell">
            {{ item.store_count_str || item.store_count }}
          </view>
          <view class="data-column data-value table-cell">
            {{ item.sell_str || item.sell_num }}
          </view>
          <view class="data-column data-value table-cell">
            {{ item.store_count_dot_str || item.store_count_dot }}
          </view>
          <view class="action-column table-cell" style="position: relative;" @tap.stop="showPopup(index, $event)">
            <img
              src="https://ceshiweb.picaime.com/static/images/sandian.png" alt="" style="
                width: 11rpx;
                height: 44rpx;
                margin-top: 4rpx;
                margin-left: 13rpx;
                color: rgb(154 156 161 / 100%);
              "
            >
            <!-- 气泡框 -->
            <view v-if="activePopupIndex === index" class="popup-menu">
              <view class="switch-container" @click.stop>
                <view
                  class="switch" :class="{
                    'switch-on': item.status === 0,
                    'switch-off': item.status === 1,
                  }" @click.stop="toggleStatus(item)"
                >
                  <view class="switch-handle" />
                  <text class="switch-text-on">
                    在售
                  </text>
                  <text class="switch-text-off">
                    停售
                  </text>
                </view>
              </view>
              <view class="delete popup-item" @tap.stop="handleDelete(item)">
                删除
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="titleofnames" style="
          background-color: #e7eaec;
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          font-weight: bold;
          box-sizing: border-box;
          height: 160rpx;
          padding: 10rpx 0;
        "
      >
        <view style="float: left; width: 25%; text-align: center">
          合计
        </view>

        <view style="float: left; width: 25%; text-align: center">
          <view v-if="statistics.total_num" style="line-height: 70rpx">
            {{ statistics.total_num }}
          </view>
          <view v-if="statistics.total_weight" style="line-height: 70rpx">
            {{ statistics.total_weight }}
          </view>
        </view>

        <view style="float: left; width: 25%; text-align: center">
          <view v-if="statistics.sell_total_num" style="line-height: 70rpx">
            {{ statistics.sell_total_num }}
          </view>
          <view v-if="statistics.sell_total_weight" style="line-height: 70rpx">
            {{ statistics.sell_total_weight }}
          </view>
        </view>

        <view style="float: left; width: 25%; text-align: center">
          <view v-if="statistics.inventory_num" style="line-height: 70rpx">
            {{ statistics.inventory_num }}
          </view>
          <view v-if="statistics.inventory_weight" style="line-height: 70rpx">
            {{ statistics.inventory_weight }}
          </view>
        </view>

        <!-- 附加信息行 -->
        <view
          class="additional-stats" style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-top: 5rpx;
          "
        >
          <view style="width: 33%; text-align: center; font-size: 24rpx">
            {{ statistics.single || "0" }}
          </view>
          <view style="width: 33%; text-align: center; font-size: 24rpx">
            {{ goods_total.all_goods_price || "0" }}
          </view>
          <view style="width: 33%; text-align: center; font-size: 24rpx">
            {{ goods_total.all_total_price || "0" }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <view
    style="
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      width: 100%;
      height: 171rpx;
      background-color: #ffffff;
      border-top: 1rpx solid #cfcfcf;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
      z-index: 100;
    "
  >
    <!-- 批次售完按钮 - 只在批次库存进入时显示 -->
    <view
      v-if="pageConfig.showPiciCompleteBtn" style="
        box-sizing: border-box;
        width: 266rpx;
        height: 112rpx;
        padding: 26rpx 10rpx 0 60rpx;
        margin: 17rpx 0 0 74rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: rgb(255 87 51 / 100%);
        border: 1rpx solid rgb(255 87 51 / 100%);
        border-radius: 8rpx;
      " @click="onPiciComplete"
    >
      批次售完
    </view>

    <!-- 库存操作按钮 - 调整布局 -->
    <view
      :style="{
        boxSizing: 'border-box',
        width: '266rpx',
        height: '112rpx',
        padding: '26rpx 10rpx 0 60rpx',
        margin: !pageConfig.isFromPici ? '17rpx auto 0' : '17rpx 0 0 74rpx',
        fontSize: '36rpx',
        fontWeight: 400,
        color: 'rgb(255 255 255 / 100%)',
        background: 'rgb(128 128 128 / 100%)',
        borderRadius: '8rpx',
      }"
    >
      库存操作
    </view>
  </view>
</template>

<script setup>
import { computed, onUnmounted, ref } from 'vue';
import { delGoods, goodsLists, updatePiciData, updateStatus } from '@/api/order';
import S1Header from '@/components/S1Header.vue';

// 页面数据
const pageData = ref({
  sourceData: null, // 原始数据（分类、子分类或批次数据）
  apiParams: null, // API调用参数
  pageType: '', // 页面类型：category, subcategory, pici
});

// 页面配置
const pageConfig = computed(() => {
  const isFromPici = pageData.value.pageType === 'pici';
  return {
    isFromPici,
    title: isFromPici ? '批次库存' : '分类库存',
    showPiciCompleteBtn: isFromPici,
  };
});

// 页面显示信息
const displayInfo = computed(() => {
  const { sourceData, pageType } = pageData.value;
  if (!sourceData) return { name: '', id: '', time: '', status: '' };

  switch (pageType) {
    case 'category':
      return {
        name: sourceData.name || '',
        id: sourceData.id || '',
        time: '',
        status: '',
      };
    case 'subcategory':
      return {
        name: `${sourceData.parentCategory?.name || ''} - ${sourceData.subCategory?.name || ''}`,
        id: sourceData.parentCategory?.id || '',
        time: '',
        status: '',
      };
    case 'pici':
      return {
        name: sourceData.huozhu_name || '',
        id: sourceData.id || '',
        time: sourceData.time || '',
        status: getStatusText(sourceData.status) || '',
      };
    default:
      return { name: '', id: '', time: '', status: '' };
  }
});

function onBack() {
  // 使用完缓存后清除
  uni.removeStorageSync('stockPageData');
  uni.navigateBack();
}

function onCollectionDoc() {
  console.log('催收文案');
}

// 商品数据 - 统一使用一个数据源
const tableData = ref([]);

// 统计数据
const statistics = ref({
  total_num: '0',
  total_weight: '0',
  sell_total_num: '0',
  sell_total_weight: '0',
  inventory_num: '0',
  inventory_weight: '0',
  goods_total: '0',
  single: '0',
  all_average_weight: '0',
  total_no_pay: '0',
  total_huan: '0',
});

// 商品总计数据
const goods_total = ref({
  all_goods_price: '0',
  all_total_price: '0',
  fujiafeidetail: [],
});

// 弹窗状态
const activePopupIndex = ref(-1);

// 添加点击位置状态
const popupPosition = ref({ x: 0, y: 0 });

onShow((options) => {
  // 从缓存中获取页面数据
  fetchPageDataFromCache();

  // 添加点击外部关闭弹窗的事件监听
  if (typeof document !== 'undefined') {
    document.addEventListener('click', handleClickOutside);
  }
});

// 从缓存中获取页面数据并调用API
const fetchPageDataFromCache = () => {
  try {
    const cacheDataStr = uni.getStorageSync('stockPageData');
    if (cacheDataStr) {
      const cacheData = JSON.parse(cacheDataStr);
      // 保存页面数据
      pageData.value = cacheData;

      // 调用 goodsLists 接口获取商品数据
      if (cacheData.apiParams) {
        fetchGoodsData(cacheData.apiParams);
      }

      console.log('页面数据缓存已清除');
    }
    else {
      console.log('缓存中没有找到页面数据');
    }
  }
  catch (error) {
    console.error('获取或解析缓存数据失败:', error);
  }
};

// 调用 goodsLists 接口获取商品数据
const fetchGoodsData = async (apiParams) => {
  try {
    const res = await goodsLists(apiParams);

    if (res.code === 200) {
      tableData.value = res.data.data;
      statistics.value = res.data.list || {};
      goods_total.value = res.data.list || {};
    }
    else {
      console.error('获取商品数据失败:', res.msg);
      uni.showToast({
        title: res.msg || '获取数据失败',
        icon: 'none',
        duration: 2000,
      });
    }
  }
  catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none',
      duration: 2000,
    });
  }
};

// 页面卸载时清理事件监听
onUnmounted(() => {
  if (typeof document !== 'undefined') {
    document.removeEventListener('click', handleClickOutside);
  }
});

// 点击外部关闭弹窗的处理函数
const handleClickOutside = () => {
  activePopupIndex.value = -1;
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '在售';
    case 2:
      return '售完';
    case 3:
      return '结完';
    default:
      return '未知';
  }
};

// 颜色
const getStatusStyle = (status) => {
  if (status === '在售') {
    return {
      backgroundColor: 'rgba(209, 255, 227, 1)',
    };
  }
  else if (status === '售完') {
    return {
      backgroundColor: 'rgba(250, 207, 165, 1)',
    };
  }
  else if (status === '结完') {
    return {
      backgroundColor: 'rgba(228, 218, 250, 1.0)',
    };
  }
  else {
    return {
      backgroundColor: 'rgba(180, 225, 255, 1.0)',
    };
  }
};

// 修改showPopup函数
function showPopup(index, event) {
  activePopupIndex.value = activePopupIndex.value === index ? -1 : index;
}

// 切换状态
function toggleStatus(item) {
  // 计算新状态（切换）
  const newStatus = item.status === 0 ? 1 : 0;

  // 调用接口更新状态
  updateStatus({
    ids: item.goods_id,
    status: newStatus,
  })
    .then((res) => {
      if (res.code === 200) {
        // 更新成功，更新本地状态
        item.status = newStatus;
        uni.showToast({
          title: newStatus === 0 ? '已开售' : '已停售',
          icon: 'success',
          duration: 2000,
        });
      }
      else {
        // 更新失败
        uni.showToast({
          title: '状态更新失败',
          icon: 'none',
          duration: 2000,
        });
      }
    })
    .catch((err) => {
      console.error('更新商品状态失败:', err);
      uni.showToast({
        title: '状态更新失败',
        icon: 'none',
        duration: 2000,
      });
    });
}

// 编辑操作
function handleEdit(item) {
  console.log('编辑', item);
  activePopupIndex.value = -1;
}

// 删除操作
function handleDelete(item) {
  // 显示确认对话框
  uni.showModal({
    title: '确认删除',
    content: `确定要删除商品"${item.goods_name}"吗？`,
    success(res) {
      if (res.confirm) {
        // 用户点击确定，调用删除接口
        delGoods({
          id: item.goods_id,
        })
          .then((res) => {
            if (res.code === 200) {
              // 删除成功
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 2000,
              });

              // 从表格数据中移除该商品
              const index = tableData.value.findIndex(
                goods => goods.goods_id === item.goods_id,
              );
              if (index !== -1) {
                tableData.value.splice(index, 1);
              }
            }
            else {
              // 删除失败
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.error('删除商品失败:', err);
            uni.showToast({
              title: '删除失败',
              icon: 'none',
              duration: 2000,
            });
          });
      }
    },
  });

  // 关闭菜单
  activePopupIndex.value = -1;
}

// 点击页面任意位置关闭气泡框
function handlePageClick() {
  activePopupIndex.value = -1;
}

// 批次售完
const onPiciComplete = () => {
  // 显示确认对话框
  uni.showModal({
    title: '确认操作',
    content: `确定要将"${displayInfo.value.name}"标记为售完吗？`,
    success(res) {
      if (res.confirm) {
        // 用户点击确定，调用接口
        updatePiciData({
          id: Number(displayInfo.value.id),
          status: 1,
        })
          .then((res) => {
            if (res.code === 200) {
              // 更新成功
              uni.showToast({
                title: '操作成功',
                icon: 'success',
                duration: 2000,
              });

              // 更新本地状态
              if (pageData.value.sourceData) {
                pageData.value.sourceData.status = 2; // 2表示售完
              }

              // 延迟返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
            else {
              // 更新失败
              uni.showToast({
                title: res.msg || '操作失败',
                icon: 'none',
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.error('批次售完操作失败:', err);
            uni.showToast({
              title: '操作失败',
              icon: 'none',
              duration: 2000,
            });
          });
      }
    },
  });
};

// 添加货品处理函数
const handleAddGoods = () => {
  const url = '/pages/common/goods/index';
  const { sourceData, pageType } = pageData.value;

  // 根据页面类型构建参数
  let params = {};

  if (pageConfig.value.isFromPici && sourceData) {
    // 批次库存：传递原始字段
    params = {
      huozhu_id: sourceData.huozhu_id,
      huozhu_name: sourceData.huozhu_name,
      pici: sourceData.pici,
      pici_id: sourceData.id,
    };
  }
  else if (sourceData) {
    // 分类库存：传递原始字段
    if (pageType === 'subcategory') {
      params = {
        catid: sourceData.parentCategory?.id,
        catid_2: sourceData.subCategory?.id || '',
      };
    }
    else {
      params = {
        catid: sourceData.id,
        catid_2: '',
      };
    }
  }

  // 构建URL参数字符串
  const paramsStr = Object.keys(params)
    .filter(key => params[key] !== undefined && params[key] !== '')
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&');

  // 跳转到常用货品页面
  uni.navigateTo({
    url: `${url}?${paramsStr}`,
  });

  console.log('跳转到常用货品页面，参数:', params);
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-bar {
  display: flex;
  gap: 10%;
  align-items: center;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #fff;
}

.search-input {
  flex: 1;
  padding: 10rpx 10rpx 10rpx 60rpx;
  font-family: sans-serif;
  font-size: 25rpx;
  color: #333;
  background: rgb(245 247 250 / 100%);
  border: 1px solid rgb(229 229 229 / 100%);
  border-radius: 20px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 25%);
}

.search-icon {
  position: absolute;
  left: 28rpx;
  width: 30rpx;
  height: 30rpx;
  padding: 10rpx;
  object-fit: cover;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter {
  display: flex;
  width: 100rpx;
  height: 40rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.filter span {
  margin-left: 4rpx;
  line-height: 40rpx;
  color: #333;
}

.filter-icon {
  width: 32rpx;
  height: 40rpx;
}

/* 按钮 */
.tabs {
  display: flex;
  justify-content: space-between;
  padding: 6rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border: 1rpx solid rgb(67 207 124 / 100%);
  border-bottom: 1rpx solid #f5f5f5;
}

.tab {
  flex: 1;
  padding: 20rpx;
  font-size: 32rpx;
  color: #808080;
  text-align: center;
  border-radius: 5rpx;
  transition: all 0.3s ease;
}

.tab.active {
  font-weight: bold;
  color: #fff;
  background-color: rgb(67 207 124 / 100%);
  border-radius: 16rpx;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}

/* 批次信息 */
.summary {
  padding: 20rpx 40rpx;
  background-color: #fff;
}

.owe-count {
  font-size: 32rpx;
  font-weight: 400;
  color: rgb(128 128 128 / 100%);
}

.owe-count-num {
  color: #ff8d1a;
}

/* huowu */
.goods_box {
  position: relative;
  width: 750rpx;
  height: 194rpx;

  margin-bottom: 4rpx;
  background: rgb(128 128 128 / 100%);
  border: 1rpx solid #efefef;
  box-shadow: 0 0 5rpx 0 rgb(206 206 206 / 80%);

  .right_box {
    position: absolute;
    top: 0;
    right: 36rpx;
    width: 60rpx;
    padding: 6rpx 9rpx;
    color: rgb(0 0 0 / 100%);
    // border: 1px solid red;
    background: #43cf7c;
    border-radius: 0 0 16rpx 16rpx;
  }

  .right_box_bottom {
    position: absolute;
    right: 36rpx;
    bottom: 62rpx;
    display: flex;
    justify-content: center;
    width: 178rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: rgb(255 255 255 / 100%);
    border-radius: 12rpx;
  }
}

.thegoodsname {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  height: 60rpx;
  margin-top: 44rpx;
  margin-left: 30rpx;
  line-height: 60rpx;

  .font-title {
    font-size: 36rpx;
    font-weight: 400;
    color: rgb(255 255 255 / 100%);
  }

  .font-number {
    width: 107rpx;
    height: 41rpx;
    margin-top: 8rpx;
    margin-left: 10rpx;
    line-height: 41rpx;
    color: #fff;
    text-align: center;
    background: rgb(166 166 166 / 100%);
    border-radius: 7rpx;
  }
}

.goods_time {
  margin-top: 7rpx;
  margin-left: 30rpx;
  font-size: 30rpx;
  color: rgb(166 166 166 / 100%);
}

.collection-text {
  position: absolute;
  right: 20rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #fff;
  background: rgb(67 207 124 / 100%);
  border-radius: 6rpx;
}

.pyq-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 4rpx;
}

// 中间的
.info_goods {
  // border: 1rpx solid red;
  display: flex;
  justify-content: space-between;
  width: 750rpx;
  height: 90rpx;
  margin-top: 3rpx;
  line-height: 90rpx;
  border-radius: 10rpx 10rpx 0 0;

  .info_left {
    margin-left: 30rpx;
    font-size: 32rpx;
    color: rgb(0 0 0 / 100%);
  }
}

/* 表格相关样式 */
.titleofname {
  display: flex;
  flex-direction: column;
  width: 750rpx;
  color: rgb(128 128 128 / 100%);
  background: rgb(245 245 245 / 100%);
  border: 1rpx solid #efefef;
  overflow-x: auto;
}

.table-header {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  font-weight: 400;
  text-align: center;
  background-color: #f2f2f2;
  width: 100%;
  min-width: 750rpx;
  height: 80rpx;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  min-width: 820rpx;
}

.table-cell {
  display: flex;
  flex: 1;
  align-items: center;
  /* 垂直居中 */
  height: 101rpx;
  padding: 0 10rpx;
  text-align: center;
}

.goods-column {
  width: 40%;
  justify-content: flex-start;
  padding-left: 16rpx;
  min-width: 280rpx;
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
  box-shadow: 6rpx 0 8rpx -4rpx rgba(0, 0, 0, 0.15);
}

.table-header .goods-column {
  background-color: #f2f2f2;
}

.data-column {
  width: 20%;
  justify-content: flex-end;
  text-align: right;
  min-width: 120rpx;
}

.action-column {
  width: 10%;
  justify-content: center;
  min-width: 60rpx;
}

.data-value {
  font-weight: 600;
  color: #333;
  font-size: 28rpx;
  word-break: keep-all;
  white-space: nowrap;
  width: 100%;
  text-align: right;
  padding-right: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 优化货品列显示 */
.goods-item-container {
  display: flex;
  align-items: flex-start;
  padding: 8rpx 0;
}

.goods-index-number {
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
  margin-right: 12rpx;
  margin-top: 6rpx;
  min-width: 32rpx;
}

.goods-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.goods-name-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

.goods-spec-container {
  display: flex;
  align-items: center;
}

.spec-tag-fixed {
  display: inline-block;
  padding: 4rpx 10rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #16a34a;
  background-color: #dcfce7;
  border: 1rpx solid #16a34a;
  border-radius: 8rpx;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  min-height: 32rpx;
  box-sizing: border-box;
}

.spec-tag-flexible {
  display: inline-block;
  padding: 4rpx 10rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #ea580c;
  background-color: #fed7aa;
  border: 1rpx solid #ea580c;
  border-radius: 8rpx;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  min-height: 32rpx;
  box-sizing: border-box;
}

.titleofnames {
  display: flex;
  flex-direction: column;
  width: 750rpx;
  font-size: 36rpx;
  color: rgb(0 0 0 / 100%);
  border: 1rpx solid #efefef;
}

.additional-stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 5rpx;
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  margin-top: 20rpx;
}

.switch-text {
  font-size: 28rpx;
  color: #ffffff;
}

.switch {
  position: relative;
  width: 128rpx;
  height: 50rpx;
  border-radius: 10rpx;
  background: #ffffff;
  border: 1rpx solid rgba(67, 207, 124, 1);
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #333;
  transition: all 0.3s;
  overflow: hidden;

  &.switch-on {
    border-color: rgba(67, 207, 124, 1);

    .switch-handle {
      transform: translateX(64rpx);
      background: rgba(67, 207, 124, 1);
    }

    .switch-text-on {
      opacity: 1;
    }

    .switch-text-off {
      opacity: 0;
    }
  }

  &.switch-off {
    border-color: rgba(255, 87, 51, 1);

    .switch-handle {
      transform: translateX(0);
      background: rgba(255, 87, 51, 1);
    }

    .switch-text-on {
      opacity: 0;
    }

    .switch-text-off {
      opacity: 1;
    }
  }
}

.switch-handle {
  position: absolute;
  width: 64rpx;
  height: 50rpx;
  transition: transform 0.3s ease;
  z-index: 1;
}

.switch-text-on,
.switch-text-off {
  position: absolute;
  width: 64rpx;
  text-align: center;
  transition: opacity 0.3s ease;
  color: #ffffff;
  z-index: 2;
}

.switch-text-on {
  left: 64rpx;
}

.switch-text-off {
  left: 0;
}

.popup-menu {
  position: absolute;
  z-index: 100;
  width: 174rpx;
  height: 141rpx;
  background: rgba(128, 128, 128, 1);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10rpx 0 20rpx;
  right: 50px;
  top: -20px;

  &::after {
    content: "";
    position: absolute;
    right: -16rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 16rpx solid rgba(128, 128, 128, 1);
    border-top: 16rpx solid transparent;
    border-bottom: 16rpx solid transparent;
  }
}

.popup-item {
  &.delete {
    width: 128rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin: 0 auto;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    border-radius: 10rpx;
    background: rgba(255, 87, 51, 1);
  }
}

.changeit {
  position: relative;
}
</style>
